<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  orderStats: {
    type: Object,
    required: true
  }
})

// 订单列表
const orders = ref([
  {
    id: 'ORDER202401010001',
    status: 'unpaid',
    totalAmount: 1299,
    createTime: '2024-01-01 10:00:00',
    products: [
      {
        id: 1,
        name: 'Air Jordan 1',
        image: 'https://via.placeholder.com/100x100?text=AJ1',
        price: 1299,
        quantity: 1
      }
    ]
  },
  {
    id: 'ORDER202401010002',
    status: 'shipped',
    totalAmount: 2398,
    createTime: '2024-01-01 11:00:00',
    products: [
      {
        id: 2,
        name: 'Ultra Boost',
        image: 'https://via.placeholder.com/100x100?text=UltraBoost',
        price: 1199,
        quantity: 2
      }
    ]
  }
])

// 订单状态映射
const statusMap = {
  unpaid: { text: '待付款', type: 'warning' },
  unshipped: { text: '待发货', type: 'info' },
  shipped: { text: '已发货', type: 'primary' },
  completed: { text: '已完成', type: 'success' },
  cancelled: { text: '已取消', type: 'danger' }
}

// 取消订单
const cancelOrder = (order) => {
  // 这里应该调用API取消订单
  // API调用后端
  // cancelOrderAPI(order.id).then(() => {
  //   order.status = 'cancelled'
  //   ElMessage.success('订单已取消')
  // })
  
  // 模拟取消成功
  order.status = 'cancelled'
  ElMessage.success('订单已取消')
}

// 支付订单
const payOrder = (order) => {
  // 这里应该调用API发起支付
  // API调用后端
  // payOrderAPI(order.id).then(() => {
  //   order.status = 'paid'
  //   ElMessage.success('支付成功')
  // })
  
  // 模拟支付成功
  order.status = 'paid'
  ElMessage.success('支付成功')
}

// 确认收货
const confirmReceipt = (order) => {
  // 这里应该调用API确认收货
  // API调用后端
  // confirmReceiptAPI(order.id).then(() => {
  //   order.status = 'completed'
  //   ElMessage.success('已确认收货')
  // })
  
  // 模拟确认收货成功
  order.status = 'completed'
  ElMessage.success('已确认收货')
}
</script>

<template>
  <el-card class="order-card">
    <template #header>
      <div class="card-header">
        <h3>我的订单</h3>
      </div>
    </template>
    
    <!-- 订单状态统计 -->
    <div class="order-stats">
      <div class="stat-item">
        <h4>待付款</h4>
        <p>{{ orderStats.unpaid }}</p>
      </div>
      <div class="stat-item">
        <h4>待发货</h4>
        <p>{{ orderStats.unshipped }}</p>
      </div>
      <div class="stat-item">
        <h4>已发货</h4>
        <p>{{ orderStats.shipped }}</p>
      </div>
      <div class="stat-item">
        <h4>已完成</h4>
        <p>{{ orderStats.completed }}</p>
      </div>
    </div>
    
    <el-empty v-if="orders.length === 0" description="暂无订单" />
    
    <!-- 订单列表 -->
    <div v-else class="order-list">
      <el-card
        v-for="order in orders"
        :key="order.id"
        class="order-item"
        shadow="hover"
      >
        <div class="order-header">
          <span class="order-id">订单号：{{ order.id }}</span>
          <el-tag :type="statusMap[order.status].type">
            {{ statusMap[order.status].text }}
          </el-tag>
        </div>
        
        <div class="order-products">
          <div
            v-for="product in order.products"
            :key="product.id"
            class="product-item"
          >
            <img :src="product.image" :alt="product.name">
            <div class="product-info">
              <h4>{{ product.name }}</h4>
              <p class="price">¥{{ product.price }} × {{ product.quantity }}</p>
            </div>
          </div>
        </div>
        
        <div class="order-footer">
          <div class="order-total">
            <span>订单总额：</span>
            <span class="total-amount">¥{{ order.totalAmount }}</span>
          </div>
          
          <div class="order-actions">
            <el-button
              v-if="order.status === 'unpaid'"
              type="primary"
              @click="payOrder(order.id)"
            >
              立即支付
            </el-button>
            <el-button
              v-if="order.status === 'unpaid'"
              type="danger"
              @click="cancelOrder(order.id)"
            >
              取消订单
            </el-button>
            <el-button
              v-if="order.status === 'shipped'"
              type="success"
              @click="confirmReceipt(order.id)"
            >
              确认收货
            </el-button>
            <el-button type="primary" text>
              查看详情
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </el-card>
</template>

<style scoped>
.order-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
}

.order-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.stat-item {
  text-align: center;
}

.stat-item h4 {
  margin: 0 0 10px;
  color: #666;
}

.stat-item p {
  margin: 0;
  font-size: 24px;
  color: #409EFF;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-item {
  padding: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.order-id {
  color: #666;
}

.order-products {
  margin-bottom: 15px;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.product-item:last-child {
  border-bottom: none;
}

.product-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 15px;
}

.product-info h4 {
  margin: 0 0 5px;
}

.price {
  margin: 0;
  color: #f56c6c;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.total-amount {
  font-size: 18px;
  color: #f56c6c;
  font-weight: bold;
}

.order-actions {
  display: flex;
  gap: 10px;
}
</style>